<template>
  <div>
    <template v-if="menuData.length > 0">
      <template v-for="(item, index) in menuData">
        <template v-if="item.children && item.children.length > 0">
          <el-submenu
            :index="item.path + '' + index.toString() + '' + path"
            :key="index.toString()"
          >
            <template slot="title">
              <i class="el-icon-message"></i>
              <span slot="title">{{ item.name }}</span>
            </template>
            <treeMenu
              :treeMenu="item.children"
              :treePath="path + item.path"
            ></treeMenu>
          </el-submenu>
        </template>
        <el-menu-item
          :index="item.path + index.toString() + '' + path"
          :key="item.path"
          @click="next(path + item.path, item)"
          v-else
        >
          <i class="el-icon-message"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>
<script>
import _ from "lodash";

export default {
  name: "treeMenu",
  data() {
    return {
      menuData: [],
      path: ""
    };
  },
  created() {
    this.menuData = _.defaultsDeep(this.menuData, this.treeMenu);
    if (_.isEmpty(this.treePath)) {
      this.path = "";
    } else {
      this.path = this.treePath + "/";
    }
  },
  methods: {
    next(path, item) {
      if (item.moduleGrade === "2") {
        this.$router.push({ path: "/"+path });
      }
    }
  },
  props: {
    treeMenu: {
      type: Array,
      default: () => {
        return [];
      }
    },
    treePath: {
      type: String,
      default: "main"
    }
  }
};
</script>

<style scoped></style>
